<template>
  <vue-content>
    <div class="left">
      <el-button type="primary" @click="goall">全部内容</el-button>
      <el-tree 
        :data="tree" 
        @node-click="handleNodeClick"
      >
      </el-tree>
    </div>
    <vue-header v-if="vueContent">
      <vue-header-button>
        <el-button type="primary" @click="handleCommand">新增</el-button>
      </vue-header-button>
    </vue-header>
    <vue-body v-if="vueContent">
      <el-table
        v-loading.body="loading"
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="title"
          label="内容标题">
        </el-table-column>
         <el-table-column
          label="内容类型"
          width="100px">
          <template scope="scope">
            {{ scope.row.contentType | contentType }}
          </template>
        </el-table-column>
          <el-table-column
          label="内容状态"
          width="100px">
          <template scope="scope">
            {{ scope.row.status | status }}
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="内容id"
          width="100px">
        </el-table-column>
        <el-table-column
          prop="author"
          label="内容作者"
          width="100px">
        </el-table-column>
        <el-table-column
          prop="releaseDate"
          label="发布日期">
        </el-table-column>
        <el-table-column label="操作" width="230px">
          <template scope="scope">
            <el-button
              size="small"
              @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
           <el-button
              size="small"
              type="info"
              @click="handleDetail(scope.$index,scope.row,tableData)">详情</el-button>
              <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index,scope.row,tableData)">删除</el-button>
          </template>
      </el-table-column>
      </el-table>
    </vue-body>
    <vue-footer style="padding: 5px 0;margin: 0 -5px;float:right;" v-if="vueContent">
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="pageSize">
      </el-pagination>
    </vue-footer>
    <edit-role
      ref="edit-role"
      @close="editFinish"
      :view="view"
      v-if="view ==='create' || view ==='edit'"/>
     <edit-detail
      ref="edit-detail"
      @close="editFinish"
      :view="view"
      v-if="view ==='detail'"/>
  </vue-content>
</template>

<script>
  import {query,detail,deletedContent} from '@/services/content'
  import {queryMenuColumn} from '@/services/program'
  import {RequestError} from '@/services/errors'
  import {deepClone} from '@/utilities/object'
  import EditRole from './edit'
  import EditDetail from './Detail'

  import UE from '../../layout/ue'
  export default {
    name: 'role-table',
    components: {EditRole,EditDetail,UE},
    data: () => ({
      vueContent:true,
      showchild:false,
      showchildid:"",
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      formFilter: {
        id: '',
        columnName:""
      },
      loading: false,
      view: '',
      tree:[],
      test:""
    }),
    methods: {
     async queryMenu(){
            let data = await queryMenuColumn();
            this.tree = data.rootTrees;
      },
     async handleDetail (index, data) {
        this.view = 'detail'
        this.vueContent = false;
        await this.$nextTick()
        this.$refs['edit-detail'].mchtId = data.id
        this.$refs['edit-detail'].formData = data
        this.$refs['edit-detail'].loadData()
      },
      editFinish (needRefresh) {
        this.view = ''
        if (needRefresh) {
          this.loadData()
        }
      },
     async handleCommand(command) {
        this.view = 'create'
        await this.$nextTick()
        this.$refs['edit-role'].dialogFormVisible = true;
        this.vueContent = false;
        // this.$refs['edit-role'].parentdata = deepClone(this.tree);
      },
     handleNodeClick(data) {
        this.loadData(data.id);
        console.log(true);
        this.showchild = true;
        this.showchildid = data.id;
      },
      goall(){
        this.loadData()
        this.showchild = false;
      },
      async loadData (columnId) {
        this.loading = true
        try {
          let data = await query(Object.assign({currentPage: this.currentPage},{perPage:10},{columnId:columnId}))
          // debugger
          this.tableData = data.data;
          this.pageSize = parseInt(data.totalResult)
        } catch (e) {
          if (e instanceof RequestError) {
            this.$alert(e.message, '提示', {
              type: 'error',
              confirmButtonText: '确定'
            })
          } else {
            throw e
          }
        }
        this.loading = false
      },
      async handleEdit (index, data) {
        this.view = 'edit';
        this.vueContent = false;
        await this.$nextTick();
        this.$refs['edit-role'].dialogFormVisible = true;
        let mydata = await detail(data.id);
        this.$refs['edit-role'].formData = deepClone(mydata.contentDetailsDto);
        this.$refs['edit-role'].imgShow = 'edit';
        this.$refs['edit-role'].imgShows = 'edit';
         var list = mydata.contentDetailsDto.columnList;
          var treeidarr = [];
          for(var i =0; i<list.length;i++){
            treeidarr.push(Number(list[i].id))
          }
           this.$refs['edit-role'].set(treeidarr)
      },
      handleDelete (index,row,data) {
        console.log(index, row,data);
        this.$confirm(`此操作将删除${row.title}, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          try {
            await deletedContent(row.id)
            this.$message({
              type: 'success',
              message: '已删除'
            })
            data.splice(index, 1)
          } catch (e) {
            if (e instanceof RequestError) {
              this.$alert(e.message, '提示', {
                type: 'error',
                confirmButtonText: '确定'
              })
            } else {
              throw e
            }
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      SearchSubmit () {
        this.currentPage = 1
        this.loadData()
      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
        this.currentPage = 1
        this.loadData()
      },
      editFinish (needRefresh) {
        this.view = ''
        this.vueContent = true;
        if (needRefresh) {
          this.loadData();
          this.queryMenu();
        }
      }
    },
    watch: {
      currentPage (newVal) {
        console.log(newVal)
        // this.loadData()
        if(this.showchild){//点击属性图的情况下，显示字列表
            this.loadData(this.showchildid)
        }else{ //显示全部
          this.loadData()
        }
      }
    },
     filters: {
      contentType (value) {
        return {"01":"文本","02":"图文","03":"视频"}[value]
      },
      status (value) {
        return {"0":"草稿","1":"审核中","2":"审核通过","3":"回收站","4":"投稿","5":"归档"}[value]
      },
      
    },
    created () {
      this.loadData()
      this.queryMenu();
    }
  }
</script>
<style scoped>
.vue-content{
    padding-left: 150px;
    position: relative;
}
.el-tree {
   
   border: none;
    
}
.left{
  position: absolute;
   width: 135px;
   left: 0px;
   top: 25px;
   height:400px;
   overflow: auto;
}
</style>




